<template>
	<view>
		<view class="invitetitle">
			<view class="invitetitle-em"></view>
			<view class="invitetitle-text">{{staff_name}}的邀约({{length}}人)</view>
		</view>
		
		<view>
			<view class="invitetabtitle">
				<view style="width: 25%;">姓名</view>
				<view style="width: 25%;">电话</view>
				<view style="width: 25%;">付费/创建</view>
				<view style="width: 25%;">拨打</view>
			</view>
			
			<divider />
		</view>
			
			<block v-for="(item, index) in invite_list_data" :key="index">
				<view class="tabstyle">
					<view class="tabtext" style="width: 25%;">{{ item.name }}</view>
					<view class="tabtext" style="width: 25%;">{{ item.tel }}</view>
					
					<view class="tabtext" style="width: 25%;">
						<view v-if="item.need_pay == 1" class="text-center" style="font-size: 28rpx;">{{ item.status ? '已付费' : '未付费' }}</view>
						<text v-else :class="item.is_check == 1 ? 'status-true' : 'status-false'">{{item.is_check == 1 ? '已审核' : '待审核'}}</text>
						<view class="text-center" style="font-size: 28rpx;">({{item.other == '' ? '未创建' : '已创建'}})</view>
					</view>
					
					<view class="tabtext d-flex j-center" style="width: 25%;">
						<image @tap="makePhone(index)" src="../../static/call.png" style="height: 35rpx;width: 35rpx;" />
					</view>
				</view>
				
				<divider />
			</block>
			
			<uni-load-more :status="status" style="margin-bottom: 100rpx;" />
			
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import uniLoadMore from '../../components/common/uni-load-more.vue'
	
	export default {
		components: {
			uniLoadMore,
		},
		props: {
			scrollH:null,
			status: null,
			invite_list_data: Array,
			staff_name: String,
			length: Number,
		},
		mounted() {
			
		},
		methods: {
			//拨打电话
			makePhone(index) {
				uni.makePhoneCall({
					phoneNumber: this.invite_list_data[index].tel
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	.status-false {
		font-size: 26rpx; background-color: #A40000; color: #fff; padding: 4rpx 10rpx; border-radius: 50rpx;
	}
	.status-true {
		font-size: 26rpx; background-color: #39B54A; color: #fff; padding: 4rpx 10rpx; border-radius: 50rpx;
	}
	
	.invitetitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 60rpx;
		padding-top: 30rpx;
		
		.invitetitle-em {
			height: 35rpx;
			width: 10rpx;
			background-color: #475dfc;
			border-radius: 50rpx;
		}

		.invitetitle-text {
			margin-left: 10rpx;
		}
	}
	
	.invitetabtitle {
		margin: 20rpx 0rpx 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
	
		view {
			width: 25%;
			text-align: center;
		}
	}
	
	.tabstyle {
		display: flex;
		// margin: 20rpx 20rpx 20rpx 20rpx;
		align-items: center;
		margin: 10rpx 0;

		.tabtext {
			width: 25%;
			text-align: center;
		}
	}
</style>
